iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
自我挑戰組

Vue 與 Element UI 兩三事系列 第 17

Vue 與 Element UI 兩三事#17 element-ui 圖標與按鈕

  • 分享至 

  • xImage
  •  

正文:
今天要來介紹 element-ui 的 icon 和 button
element-ui 很貼心的內建了 icon 供我們使用,使用方法有兩種,若單獨使用僅需要直接將 class name 放置圖標種類名稱即可

<i class="el-icon-user">

https://ithelp.ithome.com.tw/upload/images/20200917/20109403PmsMmnORAL.png
另一種方法為放在 button 內使用

<button is="el-button" icon="el-icon-user">

https://ithelp.ithome.com.tw/upload/images/20200917/20109403qCVLNPoqsA.png

接下來我們來介紹按鈕吧
https://ithelp.ithome.com.tw/upload/images/20200917/20109403dnCPWNh43q.png
這邊是 element-ui 按鈕的基本樣子,根据 type 去決定顏色,添加 plain 使顏色變為底色, hover 後再顯現出來,添加 round 讓按鈕增加圓角,使用 circle 讓按鈕變成圓型

和一般按鈕一樣,我們一樣可以添加 disabled 屬性讓按鈕無法點擊

element-ui 還有一個好用的東西是 :loading 屬性,可以接受布林值,當數值為真實會添加一個在轉動的 icon,並且更改為 disabled 狀態


上一篇
Vue 與 Element UI 兩三事#16 element-ui 布局容器與色彩
下一篇
Vue 與 Element UI 兩三事#18 Vue的生命週期
系列文
Vue 與 Element UI 兩三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言